<script setup>
import {
  cultureVenueImport,
  cultureVenueUpdate,
  cultureVenuePageList, cultureVenueExport,
} from "@/api/dailyPaper/cultureVenue";
import useTable from "@/hooks/useTable";
import {ElMessage, ElUpload, ElButton, ElInput, ElForm} from "element-plus";
import {cultureVenueColumns} from "../columns";
import {cultureAdd} from "@/api/dailyPaper/culture";
import {useExport, useImport} from "@/hooks/useDaily";


const {
  dataSource,
  pagination,
  showAddPane,
  onPageChange,
  getDataSource,
  onSave,
  onEdit,
  onCancel,
  openAdd,
  onAdd,
  addParam,
  CustomTable,
  Dialog,
  CustomForm,
} = useTable({
  getFn: cultureVenuePageList,
  updateFn: cultureVenueUpdate,
  addFn: cultureAdd
});


const {fileList, handleUploadFile} = useImport({
  importFn: cultureVenueImport,
  onFinish: () => {
    getDataSource()
  }
})


const {onExport} = useExport({
  exportFn: cultureVenueExport,
  fileName: "文体导出"
})

</script>
<template>
  <div class="btns">
    <el-upload
        v-model:file-list="fileList"
        :http-request="handleUploadFile"
        :limit="1"
    >
      <template #trigger>
        <el-button type="primary">导入</el-button>
      </template>

      <div>
        <el-button type="primary" @click="openAdd(true)">新增</el-button>
        <el-button @click="onExport">导出</el-button>
      </div>
    </el-upload>
  </div>
  <CustomTable
      class="custom_table"
      :index="false"
      :selection="false"
      :indexWidth="100"
      :tableData="dataSource"
      :page="pagination"
      @page-change="onPageChange"
      :tableOption.sync="cultureVenueColumns"
      operation
  >
    <template
        v-for="column in cultureVenueColumns"
        #[column.prop]="scope"
        :key="column.prop"
    >
      <span v-if="!scope.row.isEdit">{{ scope.row[column.prop] }}</span>
      <el-input
          v-else
          v-model="scope.row[column.prop]"
          :placeholder="`请输入${column.label}`"
      ></el-input>
    </template>

    <template #menu="scope">
      <el-button @click="onEdit(scope.row)" v-if="!scope.row.isEdit" link
      >编辑
      </el-button
      >
      <template v-else>
        <el-button @click="onSave(scope.row)" link>保存</el-button>
        <el-button @click="onCancel(scope.row)" link>取消</el-button>
      </template>
    </template>
  </CustomTable>
  <Dialog v-model:visible="showAddPane" title="新增" width="40%" @on-confirm="onAdd">
    <CustomForm label-width="130px" :formData="addParam" :columns="cultureVenueColumns"/>
  </Dialog>
</template>
<style lang="scss" scoped>
@import url("@/styles/daily.scss");
</style>
